<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link class="router-link" :to="{path: '/training/student'}">学员列表</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link class="router-link" :to="{path: '/training/student/chart',query: this.$route.query}">基本身体数据</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>历史记录</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content">
      <el-row>
        <el-col :span="12">
          <e-heading style="margin-top: 0" grade='1'>历史记录</e-heading>
        </el-col>
        <el-col :span="3" :offset="9">
          <el-button class="log-btn" @click="showDialog()">添加记录</el-button>
        </el-col>
      </el-row>
      <div v-if="bodyData && bodyData.length" class="time-line">
        <timeline timelineTheme="lightblue">
          <timeline-item 
            v-if="row.studentBodyDataList.length"
            v-for="(row,index) in bodyData"
            :key="row.id"
            color="#3ac099">
            <div class="time-zone">
              <el-row>
                <el-col :span="14">
                  <span class="timeline-time">{{new Date(row.recordDate).format()}}</span> 
                  <span class="timeline-age">
                    {{row.recordAge.toFixed(2)| numberToAge}}
                  </span>
                </el-col>
                <el-col :span="10">
                  <el-button class="link" type="text" size="mini" @click="setSelected(row)">
                    <i class="el-icon-edit"></i>修改</el-button>
                  <el-button class="link" type="text" size="mini" @click="handleDelete(row)">
                    <i class="el-icon-delete"></i>删除
                  </el-button>
                </el-col>
              </el-row>

              <table class="table">
                <tr v-for="item in row.studentBodyDataList">
                  <td class="first-td">
                  {{mapNameToValue(category, item)}}
                  </td>
                  <td>
                    {{item.dataValue}}cm
                  </td>
                </tr>
              </table>
            </div>
          </timeline-item>
        </timeline>
      </div>
      <div v-else>
        <e-placeholder
          :src="'/static/images/empty_default.png'" 
          :text="'暂无相关记录'">
        </e-placeholder>
      </div>

      <data-dialog
        v-if="dialogVisible"
        :visible="dialogVisible"
        :isEdit="true"
        @submit="handleSubmit"
        @close="dialogVisible = false"
        :data="selectedObj"
        :recordDate="recordDate"
        :category="category">
      </data-dialog>

    </div>
  </div>
  

</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
import DataDialog from './components/chart/DataDialog'
import {mapGetters} from 'vuex'
import api from 'api/train'
export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle,
    DataDialog
  },
  computed: {
    ...mapGetters({
      bodyData: 'train_body_data',
      category: 'train_body_data_category'
    })
  },
  mounted () {
    if (this.bodyData && !this.bodyData.length) {
      this.getBodyData()
    }
  },
  data () {
    return {
      dialogVisible: false,
      selectedObj: {}
    }
  },
  methods: {
    showDialog () {
      this.recordDate = +new Date()
      this.selectedObj = []
      this.dialogVisible = true
    },
    setSelected (obj) {
      this.recordDate = obj.recordDate
      this.selectedObj = obj.studentBodyDataList
      this.dialogVisible = true
    },
    handleSubmit (form) {
      api.saveBodyData({
        studentId: this.$route.query.id,
        recordDate: +new Date(form.recordDate),
        bodyDataDetailJson: form.bodyDataDetailJson
      }, {successMsg: '保存成功'}).then((res) => {
        this.getBodyData()
        this.dialogVisible = false
      }).catch((err) => {
        console.log(err)
      })
    },
    handleDelete (item) {
      console.log(item)
      this.$confirm('确认删除该记录吗？删除后不可恢复', '温馨提示', {
        type: 'warning'
      }).then(() => {
        api.removeBodyData({
          id: item.studentBodyDataList[0].id,
          recordDate: item.recordDate
        }, {successMsg: '删除成功'}).then((res) => {
          this.getBodyData()
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    getBodyData () {
      api.getBodyDate({
        studentId: this.$route.query.id
      }).then((res) => {
        let {categoryList, studentBodyDataList} = res.data
        this.$store.commit('TRAIN_BODY_DATA', studentBodyDataList)
        this.$store.commit('TRAIN_BODY_DATA_CATEGORY', categoryList)
      })
    },
    mapNameToValue (list, data) {
      let cate = list.find(item => {
        return data.categoryId === item.categoryId
      })
      if (cate !== undefined) {
        return cate.categoryName
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss">
.timeline-item{
  list-style: none;
  border-bottom: 0;
  padding-bottom:40px;
  margin: 0 0 0 28px;
  .time-zone{
    width: 340px;
  }
  .timeline-age{
    color:#909090;
    margin-left: 20px;
  }
  .timeline-time{
    font-weight: 700;
  }
}
.timeline-title-circle{
  top: 0;
}
.timeline-title{
  cursor: initial;
}
.timeline .timeline-item:last-child{
  padding-bottom:0;
  .timeline-circle{
  }
}
.timeline .timeline-item:first-child{
  .timeline-circle{
    top: .01em;
  }
}
.last-timeline{
  top:14em;
}
</style>
<style scoped lang="scss">
.table{
  margin-top: 15px;
  tr{
    td{
      width: 148px;
      text-align: center;
      background:#fff;
      border: 1px solid #e3e3e5;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
    }
  }
}
.first-td{
  color: #555;
}
</style>
